<template>
  <div style="padding: 20px 20px 0px 20px">
<!--    <el-form :inline="true" :model="typeInput" class="demo-form-inline">-->
<!--      <span style="font-size: 35px">商品类型</span>-->
<!--      <el-form-item style="float: right;margin-top: 8px">-->
<!--        <el-button type="primary" @click="addType=true">添加</el-button>-->
<!--      </el-form-item>-->
<!--      <el-form-item style="float: right;margin-top: 8px">-->
<!--        <el-button type="primary" @click="selectType">查询</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

<!--    name="file"-->
    <el-upload
        action="http://192.168.110.147:8081/putImg"
        list-type="picture-card"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        limit="3"
        :file-list="uploadFileList"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
  </div>

</template>

<script>
export default {
name: "Type",
  created() {
  },
  data(){
  return{
    addType:false,
    typeInput:{},
    dialogImageUrl: '',
    dialogVisible: false,
    uploadFileList:[]
  }
  },
  methods:{
    //成功
    handleSuccess(res,file,fileList){
      console.log("成功后")
      console.log(res)
      console.log(this.getUrl(file))
      console.log(this.getListUrl(fileList))
      this.uploadFileList = []
      console.log("===========================")


    },
    //失败
    handleError(res,file,fileList){
      console.log("失败")
      console.log("===========================")
    },
    //删除
    handleRemove(file, fileList) {
      console.log("删除时")
      this.uploadFileList = fileList
      console.log(file)
      console.log(fileList)
      console.log("==============")
    },
    //详情
    handlePreview(file) {
      console.log("详情")
      this.dialogImageUrl = file.url;
      console.log(file)
      this.dialogVisible = true;
    },
    //获取上传图片的url
    getUrl(file){
      return file.response.name
    },
    //获取上传图片数组的url 字符串
    getListUrl(fileList){
      let list = []
      for(let file of fileList){
        list.push(file.response.name)
      }
      return list
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>